<script lang="ts" setup>
const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String as PropType<string>,
    default: 'font',
  },
});
onMounted(() => {});
</script>

<template>
  <div class="my-loading">
    <slot></slot>
    <div v-if="loading" class="mark"></div>
    <div
      v-if="loading"
      :class="{
        loader: true,
        fontLoading: type == 'font',
        threedLoading: type == '3d',
        snakeLoading: type == 'snake',
        barLoader: type == 'bar',
        goOnLoader: type == 'goOn',
      }"
    ></div>
  </div>
</template>
<!-- loading 参考样式 https://css-loaders.com/rolling/ -->
<style lang="less" scoped>
.my-loading {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
}
.mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: var(--mark-bg);
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
// 文字 Loading
/* HTML: <div class="fontLoading"></div> */
.fontLoading {
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  background: radial-gradient(circle closest-side, #000 94%, #0000) right/calc(200% - 1em) 100%;
  animation: l24 1s infinite alternate linear;
}
.fontLoading::before {
  content: 'Loading...';
  line-height: 1em;
  color: #0000;
  background: inherit;
  background-image: radial-gradient(circle closest-side, #fff 94%, #000);
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes l24 {
  100% {
    background-position: left;
  }
}

// 3D Loading
/* HTML: <div class="threedLoading"></div> */
.threedLoading {
  --s: 25px;
  --g: 5px;

  width: calc(3 * (1.353 * var(--s) + var(--g)));
  display: grid;
  justify-items: end;
  aspect-ratio: 3;
  overflow: hidden;
  --_m: linear-gradient(90deg, #0000, #000 15px calc(100% - 15px), #0000);
  -webkit-mask: var(--_m);
  mask: var(--_m);
}
.threedLoading:before {
  content: '';
  width: 200%;
  background: linear-gradient(90deg, #ff1818 50%, #0000 0),
    conic-gradient(from -90deg at var(--s) calc(0.353 * var(--s)), #fff 135deg, #666 0 270deg, #aaa 0);
  background-blend-mode: multiply;
  --_m: linear-gradient(
      to bottom right,
      #0000 calc(0.25 * var(--s)),
      #000 0 calc(100% - calc(0.25 * var(--s)) - 1.414 * var(--g)),
      #0000 0
    ),
    conic-gradient(from -90deg at right var(--g) bottom var(--g), #000 90deg, #0000 0);
  -webkit-mask: var(--_m);
  mask: var(--_m);
  background-size: calc(100% / 3) 100%, calc(100% / 6) 100%;
  -webkit-mask-size: calc(100% / 6) 100%;
  mask-size: calc(100% / 6) 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: l10 1s infinite linear;
}
@keyframes l10 {
  to {
    transform: translate(calc(100% / 3));
  }
}

// 有点像蛇的 Loading
/* HTML: <div class="snakeLoading"></div> */
.snakeLoading {
  display: inline-grid;
  padding: 5px;
  background: #fff;
  filter: blur(4px) contrast(12);
}
.snakeLoading:before {
  content: '';
  height: 40px;
  aspect-ratio: 3;
  --c: #0000 64%, #000 66% 98%, #0000 101%;
  background: radial-gradient(35% 146% at 50% 159%, var(--c)) 0 0,
    radial-gradient(35% 146% at 50% -59%, var(--c)) 100% 100%;
  background-size: calc(200% / 3) 50%;
  background-repeat: repeat-x;
  animation: l11 0.8s infinite linear;
}
@keyframes l11 {
  to {
    background-position: -200% 0, -100% 100%;
  }
}

// Bar Loading
/* HTML: <div class="barLoader"></div> */
.barLoader {
  width: 40px;
  aspect-ratio: 1;
  --c: linear-gradient(var(--text-color) 0 0);
  --m: radial-gradient(farthest-side, var(--text-color) 92%, var(--text-color));
  background: var(--c), var(--m), var(--c), var(--m), var(--c), var(--m);
  background-size: 8px 12px, 8px 8px;
  background-repeat: no-repeat;
  animation: l16 1s infinite linear alternate;
}
@keyframes l16 {
  0%,
  5% {
    background-position: 0 50%, 0 0, 50% 50%, 50% 0, 100% 50%, 100% 0;
  }
  16.67% {
    background-position: 0 50%, 0 calc(50% - 10px), 50% 50%, 50% 0, 100% 50%, 100% 0;
  }
  33.33% {
    background-position: 0 calc(50% + 10px), 0 50%, 50% 50%, 50% 0, 100% 50%, 100% 0;
  }
  50% {
    background-position: 0 calc(50% + 10px), 0 50%, 50% 50%, 50% calc(50% - 10px), 100% 50%, 100% 0;
  }
  66.67% {
    background-position: 0 calc(50% + 10px), 0 50%, 50% calc(50% + 10px), 50% 50%, 100% 50%, 100% 0;
  }
  83.33% {
    background-position: 0 calc(50% + 10px), 0 50%, 50% calc(50% + 10px), 50% 50%, 100% 50%, 100% calc(50% - 10px);
  }
  95%,
  100% {
    background-position: 0 calc(50% + 10px), 0 50%, 50% calc(50% + 10px), 50% 50%, 100% calc(50% + 10px), 100% 50%;
  }
}

/* HTML: <div class="goOnLoader"></div> */
.goOnLoader {
  width: 120px;
  height: 22px;
  border-radius: 40px;
  // color: #514b82;
  color: var(--text-color);
  border: 2px solid;
  overflow: hidden;
}
.goOnLoader::before {
  content: '';
  position: absolute;
  margin: 2px;
  width: 14px;
  top: 0;
  bottom: 0;
  left: -20px;
  border-radius: inherit;
  background: currentColor;
  box-shadow: -10px 0 12px 3px currentColor;
  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%, -30px 50%);
  animation: l14 1s infinite linear;
}
@keyframes l14 {
  100% {
    left: calc(100% + 20px);
  }
}
</style>
